
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="bootstrap material admin template">
    <meta name="author" content="">

    <title>Tabs &amp; Accordions | Remark Material Admin Template</title>

    <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
    <link rel="shortcut icon" href="../assets/images/favicon.ico">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
    <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

    <!-- Skin tools (demo site only) -->
    <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
    <script src="../assets/js/sections/skintools.min.js"></script>

    <!-- Plugins -->
    <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/waves/waves.min.css?v2.2.0">

    <!-- Fonts -->
    <link rel="stylesheet" href="../../global/fonts/material-design/material-design.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>


    <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

    <!-- Scripts -->
    <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
    <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
    <script>
        Breakpoints();
    </script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
                data-toggle="menubar">
            <span class="sr-only">Toggle navigation</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
                data-toggle="collapse">
            <i class="icon md-more" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
            <span class="navbar-brand-text hidden-xs"> Remark</span>
        </div>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
                data-toggle="collapse">
            <span class="sr-only">Toggle Search</span>
            <i class="icon md-search" aria-hidden="true"></i>
        </button>
    </div>

    <div class="navbar-container container-fluid">
        <!-- Navbar Collapse -->
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
            <!-- Navbar Toolbar -->
            <ul class="nav navbar-toolbar">
                <li class="hidden-float" id="toggleMenubar">
                    <a data-toggle="menubar" href="#" role="button">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">Toggle menubar</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="hidden-xs" id="toggleFullscreen">
                    <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                        <span class="sr-only">Toggle fullscreen</span>
                    </a>
                </li>
                <li class="hidden-float">
                    <a class="icon md-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
                       role="button">
                        <span class="sr-only">Toggle Search</span>
                    </a>
                </li>
                <li class="dropdown dropdown-fw dropdown-mega">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="fade" role="button">Mega <i class="icon md-chevron-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <div class="mega-content">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5>UI Kit</h5>
                                        <ul class="blocks-2">
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/animation.html">Animation</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="buttons.html">Buttons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="colors.html">Colors</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="dropdowns.html">Dropdowns</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="icons.html">Icons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/lightbox.html">Lightbox</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="modals.html">Modals</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="panel-structure.html">Panels</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../structure/overlay.html">Overlay</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="tooltip-popover.html ">Tooltips</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/scrollable.html">Scrollable</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="typography.html">Typography</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5>Media
                                            <span class="badge badge-success">4</span>
                                        </h5>
                                        <ul class="blocks-3">
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="margin-bottom-0">Accordion</h5>
                                        <!-- Accordion -->
                                        <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                                             role="tablist">
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                                                    <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                                                       aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                                        Collapsible Group Item #1
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                                        congressus ostendit alienae, voluptati ornateque
                                                        accusamus clamat reperietur convicia albucius.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseTwo">
                                                        Collapsible Group Item #2
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                                        loco ignavi, credo videretur multoque choro fatemur
                                                        mortis animus adoptionem, bello statuat expediunt
                                                        naturales.
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseThree">
                                                        Collapsible Group Item #3
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                                        suscipere. Desiderat magnum, contenta poena desiderant
                                                        concederetur menandri damna disputandum corporum.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Accordion -->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- End Navbar Toolbar -->

            <!-- Navbar Toolbar Right -->
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
                       aria-expanded="false" role="button">
                        <span class="flag-icon flag-icon-us"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-gb"></span> English</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-fr"></span> French</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-cn"></span> Chinese</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-de"></span> German</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-nl"></span> Dutch</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-account" aria-hidden="true"></i> Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-card" aria-hidden="true"></i> Billing</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a>
                        </li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-power" aria-hidden="true"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-notifications" aria-hidden="true"></i>
                        <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>NOTIFICATIONS</h5>
                            <span class="label label-round label-danger">New 5</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">A new order has been placed</h6>
                                                <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Completed the task</h6>
                                                <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Settings updated</h6>
                                                <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Event started</h6>
                                                <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Message received</h6>
                                                <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                All notifications
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-email" aria-hidden="true"></i>
                        <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>MESSAGES</h5>
                            <span class="label label-round label-info">New 3</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Mary Adams</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                                                </div>
                                                <div class="media-detail">Anyways, i would like just do it</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Caleb Richards</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                                                </div>
                                                <div class="media-detail">I checheck the document. But there seems</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">June Lane</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                                                </div>
                                                <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Edward Fletcher</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                                                </div>
                                                <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                See all messages
                            </a>
                        </li>
                    </ul>
                </li>
                <li id="toggleChat">
                    <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
                        <i class="icon md-comment" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
            <!-- End Navbar Toolbar Right -->
        </div>
        <!-- End Navbar Collapse -->

        <!-- Site Navbar Seach -->
        <div class="collapse navbar-search-overlap" id="site-navbar-search">
            <form role="search">
                <div class="form-group">
                    <div class="input-search">
                        <i class="input-search-icon md-search" aria-hidden="true"></i>
                        <input type="text" class="form-control" name="site-search" placeholder="Search...">
                        <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
                                data-toggle="collapse" aria-label="Close"></button>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Site Navbar Seach -->
    </div>
</nav>
<div class="site-menubar">
    <div class="site-menubar-body">
        <div>
            <div>
                <ul class="site-menu">
                    <li class="site-menu-category">General</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../index.html">
                            <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
                            <span class="site-menu-title">Dashboard</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
                            <span class="site-menu-title">Layouts</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-collapsed.html">
                                    <span class="site-menu-title">Menu Collapsed</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-expended.html">
                                    <span class="site-menu-title">Menu Expended</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/grids.html">
                                    <span class="site-menu-title">Grid Scaffolding</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/layout-grid.html">
                                    <span class="site-menu-title">Layout Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/headers.html">
                                    <span class="site-menu-title">Different Headers</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/panel-transition.html">
                                    <span class="site-menu-title">Panel Transition</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/boxed.html">
                                    <span class="site-menu-title">Boxed Layout</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/two-columns.html">
                                    <span class="site-menu-title">Two Columns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/bordered-header.html">
                                    <span class="site-menu-title">Bordered Header</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-flipped.html">
                                    <span class="site-menu-title">Menubar Flipped</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                                    <span class="site-menu-title">Menubar Native Scrolling</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                                    <span class="site-menu-title">Page Aside Fixed</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
                            <span class="site-menu-title">Pages</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Errors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-400.html">
                                            <span class="site-menu-title">400</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-403.html">
                                            <span class="site-menu-title">403</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-404.html">
                                            <span class="site-menu-title">404</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-500.html">
                                            <span class="site-menu-title">500</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-503.html">
                                            <span class="site-menu-title">503</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/faq.html">
                                    <span class="site-menu-title">FAQ</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery.html">
                                    <span class="site-menu-title">Gallery</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery-grid.html">
                                    <span class="site-menu-title">Gallery Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/search-result.html">
                                    <span class="site-menu-title">Search Result</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Maps</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-google.html">
                                            <span class="site-menu-title">Google Maps</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-vector.html">
                                            <span class="site-menu-title">Vector Maps</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/maintenance.html">
                                    <span class="site-menu-title">Maintenance</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/forgot-password.html">
                                    <span class="site-menu-title">Forgot Password</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/lockscreen.html">
                                    <span class="site-menu-title">Lockscreen</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login.html">
                                    <span class="site-menu-title">Login</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register.html">
                                    <span class="site-menu-title">Register</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v2.html">
                                    <span class="site-menu-title">Login V2</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v2.html">
                                    <span class="site-menu-title">Register V2</span>
                                    <div class="site-menu-label">
                                        <span class="label label-info label-round">new</span>
                                    </div>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v3.html">
                                    <span class="site-menu-title">Login V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v3.html">
                                    <span class="site-menu-title">Register V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/user.html">
                                    <span class="site-menu-title">User List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/invoice.html">
                                    <span class="site-menu-title">Invoice</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/blank.html">
                                    <span class="site-menu-title">Blank Page</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/email.html">
                                    <span class="site-menu-title">Email</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/code-editor.html">
                                    <span class="site-menu-title">Code Editor</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/profile.html">
                                    <span class="site-menu-title">Profile</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/site-map.html">
                                    <span class="site-menu-title">Sitemap</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Elements</li>
                    <li class="site-menu-item has-sub active open">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-palette" aria-hidden="true"></i>
                            <span class="site-menu-title">Basic UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Panel</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-structure.html">
                                            <span class="site-menu-title">Panel Structure</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-actions.html">
                                            <span class="site-menu-title">Panel Actions</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-portlets.html">
                                            <span class="site-menu-title">Panel Portlets</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="buttons.html">
                                    <span class="site-menu-title">Buttons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="dropdowns.html">
                                    <span class="site-menu-title">Dropdowns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="icons.html">
                                    <span class="site-menu-title">Icons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="list.html">
                                    <span class="site-menu-title">List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tooltip-popover.html">
                                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="modals.html">
                                    <span class="site-menu-title">Modals</span>
                                </a>
                            </li>
                            <li class="site-menu-item active">
                                <a class="animsition-link" href="tabs-accordions.html">
                                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="images.html">
                                    <span class="site-menu-title">Images</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="badges-labels.html">
                                    <span class="site-menu-title">Badges &amp; Labels</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="progress-bars.html">
                                    <span class="site-menu-title">Progress Bars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="carousel.html">
                                    <span class="site-menu-title">Carousel</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="typography.html">
                                    <span class="site-menu-title">Typography</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="colors.html">
                                    <span class="site-menu-title">Colors</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="utilities.html">
                                    <span class="site-menu-title">Utilties</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
                            <span class="site-menu-title">Advanced UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item hidden-xs site-tour-trigger">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Tour</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/animation.html">
                                    <span class="site-menu-title">Animation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/highlight.html">
                                    <span class="site-menu-title">Highlight</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/lightbox.html">
                                    <span class="site-menu-title">Lightbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/scrollable.html">
                                    <span class="site-menu-title">Scrollable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/rating.html">
                                    <span class="site-menu-title">Rating</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/context-menu.html">
                                    <span class="site-menu-title">Context Menu</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/alertify.html">
                                    <span class="site-menu-title">Alertify</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/masonry.html">
                                    <span class="site-menu-title">Masonry</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/treeview.html">
                                    <span class="site-menu-title">Treeview</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/toastr.html">
                                    <span class="site-menu-title">Toastr</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-vector.html">
                                    <span class="site-menu-title">Vector Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-google.html">
                                    <span class="site-menu-title">Google Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/sortable-nestable.html">
                                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
                            <span class="site-menu-title">Structure</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/alerts.html">
                                    <span class="site-menu-title">Alerts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/ribbon.html">
                                    <span class="site-menu-title">Ribbon</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pricing-tables.html">
                                    <span class="site-menu-title">Pricing Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/overlay.html">
                                    <span class="site-menu-title">Overlay</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/cover.html">
                                    <span class="site-menu-title">Cover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline-simple.html">
                                    <span class="site-menu-title">Simple Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline.html">
                                    <span class="site-menu-title">Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/step.html">
                                    <span class="site-menu-title">Step</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/comments.html">
                                    <span class="site-menu-title">Comments</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/media.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/chat.html">
                                    <span class="site-menu-title">Chat</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/testimonials.html">
                                    <span class="site-menu-title">Testimonials</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/nav.html">
                                    <span class="site-menu-title">Nav</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/navbars.html">
                                    <span class="site-menu-title">Navbars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/blockquotes.html">
                                    <span class="site-menu-title">Blockquotes</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pagination.html">
                                    <span class="site-menu-title">Pagination</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/breadcrumbs.html">
                                    <span class="site-menu-title">Breadcrumbs</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
                            <span class="site-menu-title">Widgets</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/statistics.html">
                                    <span class="site-menu-title">Statistics Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/data.html">
                                    <span class="site-menu-title">Data Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/blog.html">
                                    <span class="site-menu-title">Blog Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/chart.html">
                                    <span class="site-menu-title">Chart Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/social.html">
                                    <span class="site-menu-title">Social Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/weather.html">
                                    <span class="site-menu-title">Weather Widgets</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
                            <span class="site-menu-title">Forms</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/general.html">
                                    <span class="site-menu-title">General Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/material.html">
                                    <span class="site-menu-title">Material Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/advanced.html">
                                    <span class="site-menu-title">Advanced Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/layouts.html">
                                    <span class="site-menu-title">Form Layouts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/wizard.html">
                                    <span class="site-menu-title">Form Wizard</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/validation.html">
                                    <span class="site-menu-title">Form Validation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/masks.html">
                                    <span class="site-menu-title">Form Masks</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/editable.html">
                                    <span class="site-menu-title">Form Editable</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Editors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-summernote.html">
                                            <span class="site-menu-title">Summernote</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-markdown.html">
                                            <span class="site-menu-title">Markdown</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-ace.html">
                                            <span class="site-menu-title">Ace Editor</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/image-cropping.html">
                                    <span class="site-menu-title">Image Cropping</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/file-uploads.html">
                                    <span class="site-menu-title">File Uploads</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
                            <span class="site-menu-title">Tables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/basic.html">
                                    <span class="site-menu-title">Basic Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/bootstrap.html">
                                    <span class="site-menu-title">Bootstrap Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/floatthead.html">
                                    <span class="site-menu-title">floatThead</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/responsive.html">
                                    <span class="site-menu-title">Responsive Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/editable.html">
                                    <span class="site-menu-title">Editable Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/jsgrid.html">
                                    <span class="site-menu-title">jsGrid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/footable.html">
                                    <span class="site-menu-title">FooTable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/datatable.html">
                                    <span class="site-menu-title">DataTables</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">Chart</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/pie-progress.html">
                                    <span class="site-menu-title">Pie Progress</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Apps</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-apps" aria-hidden="true"></i>
                            <span class="site-menu-title">Apps</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/contacts/contacts.html">
                                    <span class="site-menu-title">Contacts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/calendar/calendar.html">
                                    <span class="site-menu-title">Calendar</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/notebook/notebook.html">
                                    <span class="site-menu-title">Notebook</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                                    <span class="site-menu-title">Taskboard</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Documents</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/articles.html">
                                            <span class="site-menu-title">Articles</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/categories.html">
                                            <span class="site-menu-title">Categories</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/article.html">
                                            <span class="site-menu-title">Article</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/forum/forum.html">
                                    <span class="site-menu-title">Forum</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/message/message.html">
                                    <span class="site-menu-title">Message</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/projects/projects.html">
                                    <span class="site-menu-title">Projects</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                                    <span class="site-menu-title">Mailbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/media/overview.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/work/work.html">
                                    <span class="site-menu-title">Work</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/location/location.html">
                                    <span class="site-menu-title">Location</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Angular UI</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../angular/index.html">
                            <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                            <span class="site-menu-title">Angular UI</span>
                            <div class="site-menu-label">
                                <span class="label label-danger label-round">new</span>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="site-menubar-section">
                    <h5>
                        Milestone
                        <span class="pull-right">30%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
                    </div>
                    <h5>
                        Release
                        <span class="pull-right">60%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-menubar-footer">
        <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
           data-original-title="Settings">
            <span class="icon md-settings" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
            <span class="icon md-eye-off" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
            <span class="icon md-power" aria-hidden="true"></span>
        </a>
    </div>
</div>
<div class="site-gridmenu">
    <div>
        <div>
            <ul>
                <li>
                    <a href="../apps/mailbox/mailbox.html">
                        <i class="icon md-email"></i>
                        <span>Mailbox</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/calendar/calendar.html">
                        <i class="icon md-calendar"></i>
                        <span>Calendar</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/contacts/contacts.html">
                        <i class="icon md-account"></i>
                        <span>Contacts</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/media/overview.html">
                        <i class="icon md-videocam"></i>
                        <span>Media</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/documents/categories.html">
                        <i class="icon md-receipt"></i>
                        <span>Documents</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/projects/projects.html">
                        <i class="icon md-image"></i>
                        <span>Project</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/forum/forum.html">
                        <i class="icon md-comments"></i>
                        <span>Forum</span>
                    </a>
                </li>
                <li>
                    <a href="../index.html">
                        <i class="icon md-view-dashboard"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- Page -->
<div class="page animsition">
    <div class="page-header">
        <ol class="breadcrumb">
            <li><a href="../index.html">Home</a></li>
            <li class="active">Basic UI</li>
        </ol>
        <h1 class="page-title">Tabs &amp; Accordions</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Edit">
                <i class="icon md-edit" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                <i class="icon md-refresh-alt" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Setting">
                <i class="icon md-settings" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="page-content container-fluid">
        <!-- Panel Tabs -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Tabs</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Tabs -->
                        <div class="example-wrap">
                            <div class="nav-tabs-horizontal">
                                <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour"
                                                               role="tab">Javascript</a></li>
                                    <li class="dropdown" role="presentation">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                            <span class="caret"></span>Menu </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsOne" aria-controls="exampleTabsOne"
                                                                                      role="tab">Home</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsTwo" aria-controls="exampleTabsTwo"
                                                                       role="tab">Components</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsThree" aria-controls="exampleTabsThree"
                                                                       role="tab">Css</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsFour" aria-controls="exampleTabsFour"
                                                                       role="tab">Javascript</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content padding-top-20">
                                    <div class="tab-pane active" id="exampleTabsOne" role="tabpanel">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neglegentur sabinum instructus
                                        fingitur accusantibus harum neque consuetudine intereant
                                        numeris, ipse tuemur suum apud mediocrem iactant. Libidinibus
                                        amatoriis dicta albuci manum, statue.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsTwo" role="tabpanel">
                                        Negant parvos fructu nostram mutans supplicii ac dissentias, maius tibi licebit
                                        ruinae philosophia. Salutatus repellere titillaret expetendum
                                        ipsi. Cupiditates intellegam exercitumque privatio concederetur,
                                        sempiternum, verbis malint dissensio nullas noctesque earumque.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsThree" role="tabpanel">
                                        Benivole horrent tantalo fuisset adamare fugiendam tractatos indicaverunt animis
                                        chaere, brevi minuendas, ubi angoribus iisque deorsum audita
                                        haec dedocendi utilitas. Panaetium erimus platonem varias
                                        imperitos animum, iudiciorumque operis multa disputando.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsFour" role="tabpanel">
                                        Metus subtilius texit consilio fugiendam, opinionum levius amici inertissimae pecuniae
                                        tribus ordiamur, alienus artes solitudo, minime praesidia
                                        proficiscuntur reiciat detracta involuta veterum. Rutilius
                                        quis honestatis hominum, quisquis percussit sibi explicari.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Tabs Reverse -->
                        <div class="example-wrap">
                            <div class="nav-tabs-horizontal">
                                <ul class="nav nav-tabs nav-tabs-reverse" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsReverseOne" aria-controls="exampleTabsReverseOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseTwo" aria-controls="exampleTabsReverseTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseThree" aria-controls="exampleTabsReverseThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseFour" aria-controls="exampleTabsReverseFour"
                                                               role="tab">Javascript</a></li>
                                    <li class="dropdown" role="presentation">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                            <span class="caret"></span>Dropdown </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li class="active" role="presentation"><a data-toggle="tab" href="exampleTabsReverseOne" aria-controls="exampleTabsReverseOne"
                                                                                      role="tab">Home</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseTwo" aria-controls="exampleTabsReverseTwo"
                                                                       role="tab">Components</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseThree" aria-controls="exampleTabsReverseThree"
                                                                       role="tab">Css</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsReverseFour" aria-controls="exampleTabsReverseFour"
                                                                       role="tab">Javascript</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content padding-top-20">
                                    <div class="tab-pane active" id="exampleTabsReverseOne" role="tabpanel">
                                        Imperii discedere optio meminerit cumanum sis, delectu, probantur homine iactare
                                        fortasse, explicatis possumus discere sumitur istis verterunt
                                        dolor, procedat difficilem odio augeri ipsi. Tantopere urbanitas
                                        levamur magnam timeam impediri oblivione.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsReverseTwo" role="tabpanel">
                                        Habet qua, omnia mundus sequi pondere horrida ponendam, multavit neglexerit dissentientium
                                        consuetudinum seditione fecit pecuniae temeritas interesset,
                                        censes accessio fortibus dicturam tenebo respirare laudantium
                                        nostros constituamus, incidant fictae incorrupte. Bonorum.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsReverseThree" role="tabpanel">
                                        Defensa spe cura exorsus difficile maiorum amicorum ergo. Sequi ignavi degendae
                                        labefactetur attulit fingitur, nullas, aetatis hinc maximeque.
                                        Protervi nivem negarent rationis alia delapsa p finiri. Doloris.
                                        Dici sentire inmensae.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsReverseFour" role="tabpanel">
                                        Plena quidque diuturnitatem, perpessio quam detrimenti. Poetis, multi sole putemus
                                        prorsus, deorsum recusandae. De veniat animi. Deterritum
                                        eorumque sibi constituant legatis. Tranquilli intellegebat
                                        dissentientium contereret dissentientium. Explicatis tibique
                                        sane fecisse.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Reverse -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Tabs Left -->
                        <div class="example-wrap">
                            <div class="nav-tabs-vertical">
                                <ul class="nav nav-tabs margin-right-25" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLeftOne" aria-controls="exampleTabsLeftOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftTwo" aria-controls="exampleTabsLeftTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftThree" aria-controls="exampleTabsLeftThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLeftFour" aria-controls="exampleTabsLeftFour"
                                                               role="tab">Javascript</a></li>
                                </ul>
                                <div class="tab-content padding-vertical-15">
                                    <div class="tab-pane active" id="exampleTabsLeftOne" role="tabpanel">
                                        Puto loqueretur maxime tuentur statuam quanta quamquam multoque cogitavisse, romano
                                        continens repellat omnis liquidae, inveneris aegritudine
                                        inesse dirigentur graece secundum ipso unam, cognitionis
                                        isdem mortem tantis opibus turma virtus legum, procedat accusantium
                                        ipse sine fuissent desideraturam. Naturalem virtutum familiari
                                        nasci tenebo provident convincere. Senserit ultima faciam
                                        deterius plurimum ornateque curiosi. Oratione sit, dices
                                        malunt quibusdam. Distinguique parendum contentam graecam
                                        sale.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLeftTwo" role="tabpanel">
                                        Quaerat delectus arte exhorrescere summum disputando agatur perfunctio, e videntur
                                        repellere errorem opinor facete invidi perspici simul liberos,
                                        inhumanus. Fingitur iudico simulent polyaeno conclusionemque
                                        atomis placatae solido etiam, optinere defenditur libero
                                        consequentis aristoteli scribentur curis iudicium divinum.
                                        Nostros pertineant, concederetur moveat laborum caeco secutus
                                        rectas. Dignitatis tranquillitate negant utilior, approbantibus
                                        polyaeno malint ullo vide. Possum sane confidam cogitavisse.
                                        Sumitur. Diis.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLeftThree" role="tabpanel">
                                        Chrysippe rebus institutionem utrisque dixisset manus quippiam ignorare defatigatio
                                        doctiores, essent doctus ipsam tamquam complexiones corporisque,
                                        ars umbram sentiri venandi. Ipsam. Reprehenderit tantum debent
                                        sicine assumenda comprobavit, assumenda primos fuerit atomos
                                        amicorum inducitur quaedam miserum, potitur numquid effluere
                                        haeret ipsos consuetudine, munere putet fugiendis orationis
                                        quantumcumque. Perferendis attento saluti liberatione contra,
                                        constituam efficeret quaeso accusamus quieti petat rem nisi
                                        amicum.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLeftFour" role="tabpanel">
                                        Laudabilis. At artes audiebamus firmam discordiae potione albam ferantur, epicureum
                                        loquerer videretur formidinum utrisque simulent postremo,
                                        praesidia variari fecerit ferantur. Hominibus doctissimos
                                        multi, ferentur, certissimam medicorum bonum iucundius depravare
                                        facile. Degendae istius perfunctio quisquis ordinem ornatum,
                                        praeda atomi degendae animus. Mens eximiae placuit terrore,
                                        sollicitant efficeret audeam tantalo, vulgo laudantium evertitur
                                        spe meminerunt timentis populo, senserit inprobitas facilius
                                        referri consiliisque.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Left -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Tabs Right -->
                        <div class="example-wrap">
                            <div class="nav-tabs-vertical">
                                <ul class="nav nav-tabs nav-tabs-reverse margin-left-25" data-plugin="nav-tabs"
                                    role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsRightOne" aria-controls="exampleTabsRightOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightTwo" aria-controls="exampleTabsRightTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightThree" aria-controls="exampleTabsRightThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsRightFour" aria-controls="exampleTabsRightFour"
                                                               role="tab">Javascript</a></li>
                                </ul>
                                <div class="tab-content padding-vertical-15">
                                    <div class="tab-pane active" id="exampleTabsRightOne" role="tabpanel">
                                        Amputata tollit potiora iniuria falli scilicet dissentiet, adversarium consule
                                        patiatur iracundia incurrunt latina fit locos movere mererer,
                                        deterret quaeritur metuque suum nimium rebus perfunctio.
                                        Physici malunt, fuit videntur facillimis remotis corrigere
                                        cumque bonum moveat expetitur infimum, corrumpit solam usu
                                        eoque, futuris insitam irridente nescius leguntur carere
                                        corporis quoddam, maledicta audivi eveniet inquam deterret
                                        suspicio exhorrescere despicationes victi. Veterum auctori
                                        sapienter.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsRightTwo" role="tabpanel">
                                        Instituit nobis perspicuum sollicitant intellegi noris dicitis latine difficile
                                        viderer, perpessio reddidisti sanguinem nulli. Scipio, huic
                                        quaeritur persequeretur modis lictores patria dubio derepta
                                        verterunt, scriptorem sint certae convenire modo indignae,
                                        attulit exercitationem ignavi, expectamus, officia aristoteli
                                        nunc. Per clamat firmitatem ornatum. Beatae ingeniis amputata
                                        claudicare conversam latine, industria reprehenderit complectitur
                                        inciderit utilior, paratus prosperum ullus argumentandum
                                        latinas terroribus chrysippo, pertineant.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsRightThree" role="tabpanel">
                                        Mox clarorum disciplinam andriam derigatur secunda, timeret, parum p iucundum talem
                                        sequitur, inprobis debilitati pariter sinit facere motu percipit
                                        maledici opus. Gessisse quibusdam dubitat didicisset pellat
                                        mente conferebamus natura, dubium tu huic. Malis mortis etsi
                                        puto ante, adversantur hausta inciderint, logikh ordiamur
                                        contentiones illi acute suum conformavit, iucunditas iis
                                        leviora muniti exercitationem partus quibus video idcirco
                                        familias, domo docet beate.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsRightFour" role="tabpanel">
                                        Quales, legendus consecutionem utrisque dominorum minime indignae exquirere bonae
                                        esset vim, graece distrahi scribimus perpaulum pariter parta
                                        aliquod, doloris conducunt sensum suam. Adest succumbere
                                        appetendum andriam nascuntur. Scripserit deleniti honoris
                                        philosophorum exaudita omnem alias. Potuimus. Medeam doceat
                                        capti necessariae effugiendorum formidines contineri bono
                                        fabulas incorruptis, nullo neglexerit quietae erigimur illis
                                        insitam simulent quaerendum, perciperet, dicemus omnino ius
                                        hanc, impetum reprehendunt.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Right -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Tabs Icon -->
                        <div class="example-wrap">
                            <div class="nav-tabs-horizontal">
                                <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsIconOne" aria-controls="exampleTabsIconOne"
                                                                              role="tab"><i class="icon md-home margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconTwo" aria-controls="exampleTabsIconTwo"
                                                               role="tab"><i class="icon md-settings margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconThree" aria-controls="exampleTabsIconThree"
                                                               role="tab"><i class="icon md-star margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconFour" aria-controls="exampleTabsIconFour"
                                                               role="tab"><i class="icon md-cloud margin-0" aria-hidden="true"></i></a></li>
                                </ul>
                                <div class="tab-content padding-top-15">
                                    <div class="tab-pane active" id="exampleTabsIconOne" role="tabpanel">
                                        Fruenda stabilique contumeliae erga inpendente nostros morbi, fugiendus modo cumanum,
                                        possit sicut orestem iucunde appetere expetendum platonem,
                                        manu nisi orestem discordiae. Aliud efficiat putat accusantium
                                        acuti e didicisse cernantur optimum.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconTwo" role="tabpanel">
                                        Iucunde restincto corrupti locos sane totam contrariis, putas quaerimus, aequo
                                        grate dissentiet disseruerunt epicureum, modo adipisci contemnentes
                                        legam istius maximam, virtute torquentur multam, habemus
                                        integris morbos tradunt suppetet animis detracta.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconThree" role="tabpanel">
                                        Quarum eloquentiam, aperta. Hominibus adipiscuntur. Firme graecis doloris liberabuntur
                                        sensum recteque declarant. Aiunt, fore tranquillae dicitis
                                        necessariae, chorusque periculis libenter constituamus aspernandum
                                        ait chaere, cogitemus, quisquis omnia genuit has hae.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconFour" role="tabpanel">
                                        Excepturi causae, cepisse meliore quanta consectetur aliqua attulit aperiri. Dissentiet
                                        sicine civibus, l, certissimam animos amet consequatur amicos
                                        si. Albam. Amicitias depravata istis depravatum quas reliqui
                                        iactant convincere alios euripidis.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Icon -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Tabs Icon Left -->
                        <div class="example-wrap">
                            <div class="nav-tabs-vertical">
                                <ul class="nav nav-tabs margin-right-25" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftOne" aria-controls="exampleTabsIconLeftOne"
                                                                              role="tab"><i class="icon md-home margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftTwo" aria-controls="exampleTabsIconLeftTwo"
                                                               role="tab"><i class="icon md-settings margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftThree" aria-controls="exampleTabsIconLeftThree"
                                                               role="tab"><i class="icon md-star margin-0" aria-hidden="true"></i></a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsIconLeftFour" aria-controls="exampleTabsIconLeftFour"
                                                               role="tab"><i class="icon md-cloud margin-0" aria-hidden="true"></i></a></li>
                                </ul>
                                <div class="tab-content padding-vertical-15">
                                    <div class="tab-pane active" id="exampleTabsIconLeftOne" role="tabpanel">
                                        Disseruerunt aiebat veterum universas politus corrigere pacto disputata, sabinum
                                        officia, status latinas monet optari quid animi arbitratu,
                                        inveniri caritatem adhibuit, putamus, electis parabilis nutu
                                        unam claris magna locum disputatum, tenuit gymnasia scripserit
                                        praetereat exedunt cyrenaicos reformidans. Aliquem, profecto
                                        has perpetiuntur industriae liberalitati, prorsus bona, ullus
                                        faciendumve ennii. Dein aperiam romanum conspectum complectitur
                                        mala, fonte late quorum, commenticiam initiis incidant.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconLeftTwo" role="tabpanel">
                                        Utrumvis angore, laudatur eligendi damna tanta ultimum quidque. Data philosophis
                                        efficitur. Etsi apte deorsum tradidisse. Excepturi sublatum
                                        viros rerum alias ii peccant, ferre facillimis, iucundum
                                        veniam natus quaeritur incursione vestrae comit ignaviamque,
                                        tria fructuosam acutum secunda perveniri levis posteri vendibiliora
                                        nullam. Probes cui appetendi causas, attico familiari rem
                                        tempus cn torquatum. Officia expetendis et stultus pervenias
                                        stabilique arbitrium, numeranda.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconLeftThree" role="tabpanel">
                                        Similique corporisque. Vitam erga videmus. Comparandae fecit. Arbitrarer cives
                                        redeamus dein corpus poetae laborum intellegamus tibique,
                                        numen acute congressus soluta acutus tradere deserunt confidet
                                        iudicium, angusta, voluit discordans umquam arbitrantur,
                                        amatoriis quem inportuno distinguique. Istae, referri. Intellegimus
                                        dare hac facerem summam quo peccant maluisset earum, mel
                                        graeca constituamus provident amicitiae. Mollitia plane,
                                        doleamus defuturum ab plerique intellegimus erigimur fictae.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsIconLeftFour" role="tabpanel">
                                        Consulatu sequimur persecuti quietus aristippi propter afflueret, quibusdam congressus
                                        neglegentur delectu optimus exeduntur aliquod interesset.
                                        Quaeque postea ceterorum incurreret copulatas quos. Minuit
                                        dicunt torquatum illum libero perfecto illustribus, eximiae
                                        quidam quales praesentium turpis illustribus utinam assidua,
                                        eaque dicenda, faciunt iudicari fore sint percipiatur vivere
                                        vexetur, cuiquam num alios malle vitiis gravissimo nulla,
                                        natus lucilius possim indignius. Fortibus ait, accuratius.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Icon Left -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Tabs Solid -->
                        <div class="example-wrap">
                            <div class="nav-tabs-horizontal">
                                <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidOne" aria-controls="exampleTabsSolidOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidTwo" aria-controls="exampleTabsSolidTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidThree" aria-controls="exampleTabsSolidThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidFour" aria-controls="exampleTabsSolidFour"
                                                               role="tab">Javascript</a></li>
                                    <li class="dropdown" role="presentation">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                            <span class="caret"></span>Dropdown </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidOne" aria-controls="exampleTabsSolidOne"
                                                                                      role="tab">Home</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidTwo" aria-controls="exampleTabsSolidTwo"
                                                                       role="tab">Components</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidThree" aria-controls="exampleTabsSolidThree"
                                                                       role="tab">Css</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidFour" aria-controls="exampleTabsSolidFour"
                                                                       role="tab">Javascript</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="exampleTabsSolidOne" role="tabpanel">
                                        Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                        video sola divina amputata aliquos amputata, quanti minime
                                        quisquis astris depravare. Consecutus tranquilli ille meminit
                                        obruamus quas. Triari verbis, aliquos ignavi.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidTwo" role="tabpanel">
                                        Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                        errata hominum emolumento officii explicabo appellantur,
                                        suscipiet inciderit spatio, quantumcumque disciplinae maluisti
                                        putarent cogitemus. Voluerint adipiscendarum aristotele invidi
                                        fructuosam.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidThree" role="tabpanel">
                                        Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                        sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                        dividendo miserius utinam directam, omnium laborum. Statue
                                        litteras uberiora nescio tribuat, contereret vituperandae,
                                        magnam.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidFour" role="tabpanel">
                                        Praeterita conveniunt corrumpit divinum vis exercendi labitur. Feci adquiescere
                                        eruditi inquam segniorem tantalo. Appetendi volumus nati,
                                        suspicio, maximisque otiosum iudicabit tantalo, requirere,
                                        affectus firmissimum pariter instructior laetamur o fautrices
                                        imperitos.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Solid -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Tabs Solid Left -->
                        <div class="example-wrap">
                            <div class="nav-tabs-vertical">
                                <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftOne" aria-controls="exampleTabsSolidLeftOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftTwo" aria-controls="exampleTabsSolidLeftTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftThree" aria-controls="exampleTabsSolidLeftThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsSolidLeftFour" aria-controls="exampleTabsSolidLeftFour"
                                                               role="tab">Javascript</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="exampleTabsSolidLeftOne" role="tabpanel">
                                        Velit studuisse terentii scientiam pondere intus relinqueret andriam, natum natum
                                        mutat gravis cotidieque discenda minima esset vi gravissimis.
                                        Offendimur acutum poetae vacuitate intellegaturque primisque
                                        atilii probarent, pars plena omittendis.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidLeftTwo" role="tabpanel">
                                        Assiduitas ordinem infinito, ut artis incidunt quanto debilitati patria fungimur
                                        protervi, euripidis andriam intellegimus ecce esset consumeret,
                                        multi quietus fastidii prima maximeque corrumpit, afferrent,
                                        ducimus epicuro multavit maledici dolere.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidLeftThree" role="tabpanel">
                                        Peccandi sinit defendere bono sermo vocent, maius, suppetet plurimum eos scribi
                                        aetatis captet nosmet cognitionis dolere o. Percipit interpretaris
                                        illud variari censes, gaudemus. Nostris, arguerent vitium
                                        timentis arguerent contumeliae.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsSolidLeftFour" role="tabpanel">
                                        Conversa oblivione vocent antiopam omnem quodsi superstitio centurionum, possumus
                                        iactare denique quieti deorsum ullo posse, ista obruamus
                                        omnisque alios diligant concessum, faciendumve sine causam
                                        moribus occultarum via octavio interpretum.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Solid Left -->
                    </div>
                </div>

                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Tabs Line -->
                        <div class="example-wrap margin-lg-0">
                            <div class="nav-tabs-horizontal">
                                <ul class="nav nav-tabs nav-tabs-line" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineOne" aria-controls="exampleTabsLineOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineTwo" aria-controls="exampleTabsLineTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineThree" aria-controls="exampleTabsLineThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineFour" aria-controls="exampleTabsLineFour"
                                                               role="tab">Javascript</a></li>
                                    <li class="dropdown" role="presentation">
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                            <span class="caret"></span>Dropdown </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineOne" aria-controls="exampleTabsLineOne"
                                                                                      role="tab">Home</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineTwo" aria-controls="exampleTabsLineTwo"
                                                                       role="tab">Components</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineThree" aria-controls="exampleTabsLineThree"
                                                                       role="tab">Css</a></li>
                                            <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineFour" aria-controls="exampleTabsLineFour"
                                                                       role="tab">Javascript</a></li>
                                        </ul>
                                    </li>
                                </ul>
                                <div class="tab-content padding-top-20">
                                    <div class="tab-pane active" id="exampleTabsLineOne" role="tabpanel">
                                        Quoquo timeret omne redeamus ratione monet nosque requietis afferrent iste, pertinerent.
                                        Postremo frustra oportet pueriliter finxerat eos offendit
                                        fecerint, iudicem quieti scribi animumque pondere ancillae,
                                        timeret stoicos iustitia parvam.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineTwo" role="tabpanel">
                                        Sole, latinas incurreret optari vivatur, porro delectu epicurus cadere impedit
                                        fit ferreum concludaturque varias, omnium gloriosis vivendo
                                        via filio contentam expeteretur fonte expectata, quosque
                                        praetor quid iucunditatis fortitudinem esse.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineThree" role="tabpanel">
                                        Maestitiam quamquam iudicare veterum contineri ipse cognoscerem se omittantur dialectica,
                                        dixit poterit nondum tempora corpora claudicare ratione percipitur.
                                        Earum comprehenderit laudem platonis allevatio graeci, invidus
                                        coercendi valetudinis numen deseruisse.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineFour" role="tabpanel">
                                        Adiit optime intemperantiam ostendis doctus brevi provincia suscepi. Eos efficitur
                                        inprobis negent turbulenta consentientis ingeniis natura,
                                        desperantes quisque concessum theophrasti, torquatus detracto,
                                        deinde, intellegentium fruitur errorem nulli vivatur, operis.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Line With JS -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Tabs Line Left With JS -->
                        <div class="example-wrap">
                            <div class="nav-tabs-vertical">
                                <ul class="nav nav-tabs nav-tabs-line margin-right-25" data-plugin="nav-tabs" role="tablist">
                                    <li class="active" role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftOne" aria-controls="exampleTabsLineLeftOne"
                                                                              role="tab">Home</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftTwo" aria-controls="exampleTabsLineLeftTwo"
                                                               role="tab">Components</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftThree" aria-controls="exampleTabsLineLeftThree"
                                                               role="tab">Css</a></li>
                                    <li role="presentation"><a data-toggle="tab" href="#exampleTabsLineLeftFour" aria-controls="exampleTabsLineLeftFour"
                                                               role="tab">Javascript</a></li>
                                </ul>
                                <div class="tab-content padding-vertical-15">
                                    <div class="tab-pane active" id="exampleTabsLineLeftOne" role="tabpanel">
                                        Mel, incorruptis confidam derepta inportuno perpetuam placatae. Expetenda summam
                                        venandi cotidie euripidis vexetur, scribendi recta fortunam
                                        hanc oblivione. Iniuria ipso statuam utrumque asperiores
                                        eae cogitemus, evertitur triarium perspexit conclusionemque
                                        propterea repellendus agatur scilicet, leniter intervalla
                                        nocet praeterierunt tuum privatione, senserit sale vias,
                                        delectatum dedecora ratione o religionis derigatur diuturnum
                                        arbitrantur conspiratione, legam opera splendore iste democritum
                                        apte romanum legum egregios.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineLeftTwo" role="tabpanel">
                                        Mnesarchum velit cumanum utuntur tantam deterritum, democritum vulgo contumeliae
                                        abest studuisse quanta telos. Inmensae. Arbitratu dixisset
                                        invidiae ferre constituto gaudeat contentam, omnium nescius,
                                        consistat interesse animi, amet fuisset numen graecos incidunt
                                        euripidis praesens, homines religionis dirigentur postulant.
                                        Magnum utrumvis gravitate appareat fabulae facio perveniri
                                        fruenda indicaverunt texit, frequenter probet diligenter
                                        sententia meam distinctio theseo legerint corporis quoquo,
                                        optari futurove expedita.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineLeftThree" role="tabpanel">
                                        Faciendi denique miserius iudico, significet ingenii adduci angere efficit linguam.
                                        Delectatum copulatas solemus tenere legam ignaviamque diis
                                        peccant ornamenta videro, adquiescere bonorum quisquam ceramico
                                        minime quodsi corporisque. Nostri pauca gravioribus reici
                                        solvantur, angoribus naturalem sed epicurei occultum sola
                                        institutionem meminerunt quem fonte, confirmat. Cui eodem
                                        perspecta vim solis innumerabiles, videatur status qui quanto
                                        sapientiam nomini honestum, comit sumitur nati via.
                                    </div>
                                    <div class="tab-pane" id="exampleTabsLineLeftFour" role="tabpanel">
                                        Dicent feramus necesse proficiscuntur libidinem quisquis, petulantes divitias compositis,
                                        disseretur voluptates crudeli sustulisti. Hostis res utuntur
                                        bono incurrunt navigandi laboribus istae tali, miserum metuamus
                                        labor quasi synephebos iudicante. Effecerit sicine falsarum
                                        pugnantibus imperitos, vero successionem exhorrescere illis
                                        magnopere deteriora maioribus necessariam industria. Illi
                                        variari stabilique augendas suscipiet, corrigere conducunt,
                                        divinum affecti, eruditus clarorum. Spatio gustare cupiditates
                                        desideret aliena sinat utrumque.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Tabs Line Left -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Tabs -->

        <!-- Tabs In Panel -->
        <h4>Tabs With Inverse</h4>
        <div class="row">
            <div class="col-lg-6">
                <!-- Example Tabs Inverse -->
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse">
                        <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsInverseOne" aria-controls="exampleTabsInverseOne"
                                   role="tab">
                                    The first tab
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsInverseTwo" aria-controls="exampleTabsInverseTwo"
                                   role="tab">
                                    The second tab
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content padding-20">
                            <div class="tab-pane active" id="exampleTabsInverseOne" role="tabpanel">
                                Amicorum doloribus splendido iniuste odio andriam suas andriam scripta posidonium,
                                poetis adolescens incorrupte disserunt eruditionem astris verbis
                                cuius malle quantum, quibusdam iudico perfunctio re, audire menandri
                                quantus occultarum studiis.
                            </div>
                            <div class="tab-pane" id="exampleTabsInverseTwo" role="tabpanel">
                                Insequitur invidi an sumitur accedere epicurum divina claudicare quiddam, praebeat
                                corporis generis errata tempora latinas possent arare soliditatem
                                desiderare, poterit. Incorrupte, tantas nivem solum frustra saxum
                                tantis litteras accusata.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Tabs Inverse -->
            </div>

            <div class="col-lg-6">
                <!-- Example Tabs Left Inverse -->
                <div class="example-wrap">
                    <div class="nav-tabs-vertical nav-tabs-inverse">
                        <ul class="nav nav-tabs" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsLeftInverseOne" aria-controls="exampleTabsLeftInverseOne"
                                   role="tab">
                                    <i class="icon md-home margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsLeftInverseTwo" aria-controls="exampleTabsLeftInverseTwo"
                                   role="tab">
                                    <i class="icon md-settings margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsLeftInverseThree" aria-controls="exampleTabsLeftInverseThree"
                                   role="tab">
                                    <i class="icon md-star margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content padding-20">
                            <div class="tab-pane active" id="exampleTabsLeftInverseOne" role="tabpanel">
                                Ipse honeste propter provincia iudex, eorum perinde brevi macedonum, conferebamus
                                mirari stoicis, centurionum stabilitas sponte. Emancipaverat
                                liberavisse possumus quibusdam disseruerunt percipi non nusquam
                                administrari. Istius cupiditate vestrae addidisti ferri explicatis,
                                senserit dicemus divitiarum. Mel habeat iudicandum ecce. Oratio
                                probarentur reliquisti metu ullo peccant, acutus debeo recta
                                suapte iucunda postulet audita morte, occultum noctesque appellant
                                progrediens viros torquatum potitur intervalla.
                            </div>
                            <div class="tab-pane" id="exampleTabsLeftInverseTwo" role="tabpanel">
                                Conspiratione, egregios summam gessisse videro amice qui captet, fecit, legendos
                                probo ponderum vult detractio solitudo facete gymnasia defendit
                                triarius. Reliquarum cognitionem noris, regione filium delectu
                                efficiat probaretur, civium vitam beateque eriguntur concursio
                                sapientia seditione misisti allevatio ego. Deorum principes.
                                Delicatissimi inmensae partes facere sentire frequenter pars
                                dedecora gloriatur, pars sapientium cursu possit imperiis homo
                                patrius repellere haec hortensio. Solvantur.
                            </div>
                            <div class="tab-pane" id="exampleTabsLeftInverseThree" role="tabpanel">
                                Virtutibus effectrices patet splendore confectum assiduitas operam, politus oderis.
                                Cernimus, vexetur approbantibus ne inimicus putavisset magnam
                                finitas. Gloriatur, reperiuntur vim historiae tenuit, cadere,
                                quaerendum albucius tranquilli in interesset praesidia ignoratione
                                ait adiuvet fructuosam, veniam facilis erit optinere aiunt epicuro
                                dissentiunt afferat, molestum quando minimum noster desiderat
                                antiopam igitur indoctum. Audaces antiquitate discedere aequum
                                conflixisse familiarem aliquid, notissima laudandis adiungimus.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Tabs Left Inverse -->
            </div>

            <div class="clearfix visible-lg-block"></div>

            <div class="col-lg-6">
                <!-- Example Tabs Solid Inverse -->
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsSolidInverseOne" aria-controls="exampleTabsSolidInverseOne"
                                   role="tab">
                                    The first tab
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsSolidInverseTwo" aria-controls="exampleTabsSolidInverseTwo"
                                   role="tab">
                                    The second tab
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="exampleTabsSolidInverseOne" role="tabpanel">
                                Medium. Disciplina imitarentur orestem refert, quanta stabilem exedunt defuturum
                                discedere poenis iustius primum omnis blanditiis, declinabunt
                                lineam, suscipiet umquam damna respondendum quorum, easque iis
                                videretur finis,blanditiis verentur.
                            </div>
                            <div class="tab-pane" id="exampleTabsSolidInverseTwo" role="tabpanel">
                                Arbitror nulli fugiat liberos mi aequum epularum praetulerit. Facerem hausta intellegere
                                caret eximiae etiamsi veserim disciplinis iustitia, expetendum
                                credo gloriatur perpetiuntur, fugiendus pleniorem fruentem, necesse
                                pararetur. Et, horreat optimum.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Tabs Solid Inverse -->
            </div>

            <div class="col-lg-6">
                <!-- Example Tabs Solid Left Inverse -->
                <div class="example-wrap">
                    <div class="nav-tabs-vertical nav-tabs-inverse">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsSolidLeftInverseOne" aria-controls="exampleTabsSolidLeftInverseOne"
                                   role="tab">
                                    <i class="icon md-home margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsSolidLeftInverseTwo" aria-controls="exampleTabsSolidLeftInverseTwo"
                                   role="tab">
                                    <i class="icon md-settings margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li role="presentation">
                                <a data-toggle="tab" href="#exampleTabsSolidLeftInverseThree" aria-controls="exampleTabsSolidLeftInverseThree"
                                   role="tab">
                                    <i class="icon md-star margin-0" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="exampleTabsSolidLeftInverseOne" role="tabpanel">
                                Ullus exercendi posidonium fugiendam erat incorruptis rationis. Amet amicis individua
                                ruant, epicurus nomini patriam investigandi. Greges gloriae aetatis.
                                Importari. Maiora incurreret, eius inimicus summo. Inprobitatem
                                scipio, vias assumenda amicitias doloris gloriosis fructu, emolumento
                                fecerint deserere rebus natura, desideret, gratiam aristippi
                                fructuosam facultas multitudinem pronuntiaret quales timeam fit,
                                totus incommoda plurimum amarissimam aetatis cognitioque, grate,
                                eam turpe censet nescio.
                            </div>
                            <div class="tab-pane" id="exampleTabsSolidLeftInverseTwo" role="tabpanel">
                                Praesidia honestatis. Sitisque disseruerunt desperantes feramus duce quorum conficiuntque
                                insolens, errata dignissimos beatam audiam turpius confidere
                                quale. Brevi quid poterimus aristippus miserius intervalla intereant
                                fautrices. Etiamsi amorem fastidii notae incursione transferam,
                                consequantur transferre molestum reprehensa maledici labefactetur
                                dicebas hoc legum aliam, occulte iisque epularum iste modus disserendum
                                recteque cui, epicuri ennius dignitatis iudicatum beatus aristoteli
                                beata fruitur, postulant.
                            </div>
                            <div class="tab-pane" id="exampleTabsSolidLeftInverseThree" role="tabpanel">
                                Homine appellant ruant medicorum honestatis, disputationi saluti facerem neglexerit
                                versuum intellegimus, habet vide eos, quando legendos quadam
                                dolores consequi admonere vacuitate quaedam, afficitur postea
                                cognitio omittam sanguinem aequitate iustius deteriora, error
                                rutilius inbecilloque ancillae zenonem conversam omnem, cogitavisse
                                interrogari integris atque e, tota tantis repetitis nos disciplina
                                plus sitisque, intuemur, extremo deteriora. Involuta diligant
                                aequi causa plerique praesertim.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Example Tabs Solid Left Inverse -->
        </div>
        <!-- End Tabs With Inverse -->

        <div class="row">
            <div class="col-sm-6">
                <!-- Example Iconified Tabs -->
                <div class="example-wrap">
                    <h4 class="example-title">Iconified Tabs</h4>
                    <div class="example">
                        <div class="nav-tabs-horizontal nav-tabs-inverse">
                            <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                                <li class="active" role="presentation">
                                    <a data-toggle="tab" href="#exampleIconifiedTabsOne" aria-controls="exampleIconifiedTabsOne"
                                       role="tab">
                                        <i class="icon md-account" aria-hidden="true"></i> User
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a data-toggle="tab" href="#exampleIconifiedTabsTwo" aria-controls="exampleIconifiedTabsTwo"
                                       role="tab">
                                        <i class="icon md-roller" aria-hidden="true"></i> Plugin
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a data-toggle="tab" href="#exampleIconifiedTabsThree" aria-controls="exampleIconifiedTabsThree"
                                       role="tab">
                                        <i class="icon md-settings" aria-hidden="true"></i> Settings
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content padding-top-15">
                                <div class="tab-pane active" id="exampleIconifiedTabsOne" role="tabpanel">Anim elit et nostrud qui reprehenderit. Sunt esse voluptate aliqua
                                    tempor pariatur velit duis. Consequat exercitation tempor elit
                                    est deserunt consequat consectetur in. Laboris do aute consequat
                                    tempor qui et. Aliqua reprehenderit consequat fugiat anim tempor
                                    velit magna ea nostrud. Labore labore irure excepteur sunt
                                    mollit elit. Ex pariatur laborum culpa consequat quis ipsum
                                    in.</div>
                                <div class="tab-pane" id="exampleIconifiedTabsTwo" role="tabpanel">Quis reprehenderit enim adipisicing ex sint. Cillum aliqua sint
                                    laborum aute dolore dolor labore nisi. Excepteur aliqua deserunt
                                    sint sint pariatur do nisi velit non. Quis consequat eu eiusmod
                                    adipisicing commodo minim in. Sint voluptate ad commodo enim
                                    magna mollit. Aute minim proident aute duis. Officia non ex
                                    ullamco fugiat cillum consectetur officia.</div>
                                <div class="tab-pane" id="exampleIconifiedTabsThree" role="tabpanel">Sint excepteur duis incididunt duis Lorem veniam. Aliquip ea
                                    irure pariatur duis elit reprehenderit amet veniam. Veniam
                                    eu labore excepteur cupidatat. Et elit veniam cupidatat sunt
                                    ea irure. Voluptate consequat officia irure dolor. Dolor qui
                                    elit reprehenderit ad ut ex occaecat. Ea sit duis magna laboris
                                    enim proident ex ad.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Example Iconified Tabs -->
            </div>

            <div class="col-sm-6">
                <!-- Example Closeable Tabs -->
                <div class="example-wrap">
                    <h4 class="example-title">Closeable Tabs</h4>
                    <div class="example">
                        <div class="nav-tabs-horizontal nav-tabs-inverse">
                            <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                                <li class="active" role="presentation">
                                    <a data-toggle="tab" href="#exampleCloseableTabsOne" aria-controls="exampleCloseableTabsOne"
                                       role="tab">
                                        User
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a data-toggle="tab" href="#exampleCloseableTabsTwo" aria-controls="exampleCloseableTabsTwo"
                                       role="tab">
                      <span class="close" data-close="tab" aria-label="Close">
                        <strong title="true">×</strong>
                      </span>
                                        Plugin
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a data-toggle="tab" href="#exampleCloseableTabsThree" aria-controls="exampleCloseableTabsThree"
                                       role="tab">
                      <span class="close" data-close="tab" aria-label="Close">
                        <strong title="true">×</strong>
                      </span>
                                        Settings
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content padding-top-15">
                                <div class="tab-pane active" id="exampleCloseableTabsOne" role="tabpanel">Esse ut ad elit quis anim nostrud pariatur excepteur. Deserunt
                                    duis et aute sit nostrud consectetur. Id consequat mollit eiusmod
                                    incididunt cillum. Culpa est anim cillum cillum qui ea. Minim
                                    pariatur incididunt mollit exercitation consectetur. Ex aute
                                    laborum laboris qui ea amet. Ut elit occaecat amet ea.</div>
                                <div class="tab-pane" id="exampleCloseableTabsTwo" role="tabpanel">Consequat in veniam incididunt ex incididunt mollit ipsum voluptate.
                                    Commodo ad non culpa ad nisi. Cillum est ipsum dolor commodo
                                    consectetur cupidatat amet incididunt occaecat. Deserunt voluptate
                                    labore cupidatat eu ullamco dolore aliquip consectetur. Occaecat
                                    veniam dolor in anim amet aliquip Lorem. Ea enim proident nisi
                                    in. Mollit velit voluptate ut fugiat mollit anim excepteur
                                    sit.</div>
                                <div class="tab-pane" id="exampleCloseableTabsThree" role="tabpanel">Cillum sit exercitation consectetur labore excepteur nulla labore
                                    enim. Ipsum proident voluptate ex pariatur. Qui nulla culpa
                                    elit laboris cupidatat. Laboris adipisicing nulla cillum pariatur
                                    id minim dolor. Proident reprehenderit ipsum reprehenderit
                                    esse elit est velit. Quis elit aute commodo dolore exercitation
                                    elit nisi labore esse. Laborum aliqua irure ex aute.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Closeable Tabs -->
            </div>
        </div>

        <!-- End Iconified Tabs -->

        <!-- Tab Animation -->
        <h4>Tab Animations</h4>
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftOne" aria-controls="exampleTabsAnimateSlideLeftOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftTwo" aria-controls="exampleTabsAnimateSlideLeftTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideLeftThree" aria-controls="exampleTabsAnimateSlideLeftThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-slide-left" id="exampleTabsAnimateSlideLeftOne"
                                 role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-slide-left" id="exampleTabsAnimateSlideLeftTwo"
                                 role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-slide-left" id="exampleTabsAnimateSlideLeftThree"
                                 role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideRightOne" aria-controls="exampleTabsAnimateSlideRightOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideRightTwo" aria-controls="exampleTabsAnimateSlideRightTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideRightThree" aria-controls="exampleTabsAnimateSlideRightThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-slide-right" id="exampleTabsAnimateSlideRightOne"
                                 role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-slide-right" id="exampleTabsAnimateSlideRightTwo"
                                 role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-slide-right" id="exampleTabsAnimateSlideRightThree"
                                 role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomOne" aria-controls="exampleTabsAnimateSlideBottomOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomTwo" aria-controls="exampleTabsAnimateSlideBottomTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideBottomThree" aria-controls="exampleTabsAnimateSlideBottomThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-slide-bottom" id="exampleTabsAnimateSlideBottomOne"
                                 role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-slide-bottom" id="exampleTabsAnimateSlideBottomTwo"
                                 role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-slide-bottom" id="exampleTabsAnimateSlideBottomThree"
                                 role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideTopOne" aria-controls="exampleTabsAnimateSlideTopOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideTopTwo" aria-controls="exampleTabsAnimateSlideTopTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateSlideTopThree" aria-controls="exampleTabsAnimateSlideTopThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-slide-top" id="exampleTabsAnimateSlideTopOne"
                                 role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-slide-top" id="exampleTabsAnimateSlideTopTwo" role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-slide-top" id="exampleTabsAnimateSlideTopThree"
                                 role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateScaleUpOne" aria-controls="exampleTabsAnimateScaleUpOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateScaleUpTwo" aria-controls="exampleTabsAnimateScaleUpTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateScaleupThree" aria-controls="exampleTabsAnimateScaleupThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-scale-up" id="exampleTabsAnimateScaleUpOne"
                                 role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-scale-up" id="exampleTabsAnimateScaleUpTwo" role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-scale-up" id="exampleTabsAnimateScaleupThree" role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="example-wrap">
                    <div class="nav-tabs-horizontal nav-tabs-inverse nav-tabs-animate">
                        <ul class="nav nav-tabs nav-tabs-solid" data-plugin="nav-tabs" role="tablist">
                            <li class="active" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateFadeOne" aria-controls="exampleTabsAnimateFadeOne"
                                   role="tab" aria-expanded="true">
                                    Home
                                </a>
                            </li>
                            <li role="presentation" class="">
                                <a data-toggle="tab" href="#exampleTabsAnimateFadeTwo" aria-controls="exampleTabsAnimateFadeTwo"
                                   role="tab" aria-expanded="false">
                                    Components
                                </a>
                            </li>
                            <li class="" role="presentation">
                                <a data-toggle="tab" href="#exampleTabsAnimateFadeThree" aria-controls="exampleTabsAnimateFadeThree"
                                   role="tab" aria-expanded="true">
                                    Css
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active animation-fade" id="exampleTabsAnimateFadeOne" role="tabpanel">
                                Omnisque ius possent effici approbantibus earumque explicabo volunt. Aptissimum
                                video sola divina amputata aliquos amputata, quanti minime quisquis
                                astris depravare. Consecutus tranquilli ille meminit obruamus
                                quas. Triari verbis, aliquos ignavi.
                            </div>
                            <div class="tab-pane animation-fade" id="exampleTabsAnimateFadeTwo" role="tabpanel">
                                Ambigua huc ipsarum similique malis physicis splendide, miser philosophi tria finitum
                                errata hominum emolumento officii explicabo appellantur, suscipiet
                                inciderit spatio, quantumcumque disciplinae maluisti putarent
                                cogitemus. Voluerint adipiscendarum aristotele invidi fructuosam.
                            </div>
                            <div class="tab-pane animation-fade" id="exampleTabsAnimateFadeThree" role="tabpanel">
                                Infimum finibus optimi contentus legendam electram, stabilitas antiquitate easque
                                sicut qualisque, atomus versatur alienae, brute pulcherrimum
                                dividendo miserius utinam directam, omnium laborum. Statue litteras
                                uberiora nescio tribuat, contereret vituperandae, magnam.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Tab Animation -->

        <!-- Panel Collapse -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Collapse</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-6">
                        <!-- Example Example -->
                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">Example</h4>
                            <p>Click the buttons below to show and hide another element via class
                                changes:</p>
                            <ul>
                                <li><code>.collapse</code> hides content</li>
                                <li><code>.collapsing</code> is applied during transitions</li>
                                <li><code>.collapse.in</code> shows content</li>
                            </ul>
                            <p>You can use a link with the <code>href</code> attribute, or a button
                                with the <code>data-target</code> attribute. In both cases, the
                                <code>data-toggle="collapse"</code> is required.</p>
                            <div class="example">
                                <div class="example-buttons">
                                    <a class="btn btn-primary" data-toggle="collapse" href="#exampleCollapseExample"
                                       aria-expanded="false" aria-controls="exampleCollapseExample">
                                        Link with href
                                    </a>
                                    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#exampleCollapseExample"
                                            aria-expanded="false" aria-controls="exampleCollapseExample">
                                        Button with data-target
                                    </button>
                                </div>
                                <div class="collapse" id="exampleCollapseExample">
                                    <div class="well">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                                        ad squid. Nihil anim keffiyeh helvetica, craft beer labore
                                        wes anderson cred nesciunt sapiente ea proident.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Example -->
                    </div>

                    <div class="col-lg-6">
                        <!-- Example Accordion Example -->
                        <div class="example-wrap">
                            <h4 class="example-title">Accordion Example</h4>
                            <div class="example">
                                <div class="panel-group panel-group-simple margin-bottom-0" id="exampleAccordion"
                                     aria-multiselectable="true" role="tablist">
                                    <div class="panel">
                                        <div class="panel-heading" id="exampleHeadingOne" role="tab">
                                            <a class="panel-title" data-parent="#exampleAccordion" data-toggle="collapse" href="#exampleCollapseOne"
                                               aria-controls="exampleCollapseOne" aria-expanded="true">
                                                Collapsible Group Item #1
                                            </a>
                                        </div>
                                        <div class="panel-collapse collapse in" id="exampleCollapseOne" aria-labelledby="exampleHeadingOne"
                                             role="tabpanel">
                                            <div class="panel-body">
                                                Viros falso ad noctesque, perpetuam probabis molestum labore rerum t alterum indocti
                                                persequeretur dignitatis, numquam an quantus inopem,
                                                intellegam praetermissum conquirendae intus, amicorum
                                                putarent assiduitas sicut suscipiet fructuosam, summis
                                                fortitudinem cupiditatum depravata vita volumus. Posteri
                                                tantam partes poterimus ea tibi, physici.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel">
                                        <div class="panel-heading" id="exampleHeadingTwo" role="tab">
                                            <a class="panel-title collapsed" data-parent="#exampleAccordion" data-toggle="collapse"
                                               href="#exampleCollapseTwo" aria-controls="exampleCollapseTwo"
                                               aria-expanded="false">
                                                Collapsible Group Item #2
                                            </a>
                                        </div>
                                        <div class="panel-collapse collapse" id="exampleCollapseTwo" aria-labelledby="exampleHeadingTwo"
                                             role="tabpanel">
                                            <div class="panel-body">
                                                Legendus albam declinabunt plus omnisque existimant, depulsa libido irridente quoddam
                                                eripuit excruciant, sublata amicis corporisque utrum
                                                detracto suaviter caritatem libero, causas, odioque sollicitudines
                                                sic eruditionem scaevola, magnam gravissimis utramque
                                                scriptum defuturum, forensibus, laboribus voluptate maestitiam,
                                                haeret inopem optimum satisfacit ii latinam.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel">
                                        <div class="panel-heading" id="exampleHeadingThree" role="tab">
                                            <a class="panel-title collapsed" data-parent="#exampleAccordion" data-toggle="collapse"
                                               href="#exampleCollapseThree" aria-controls="exampleCollapseThree"
                                               aria-expanded="false">
                                                Collapsible Group Item #3
                                            </a>
                                        </div>
                                        <div class="panel-collapse collapse" id="exampleCollapseThree" aria-labelledby="exampleHeadingThree"
                                             role="tabpanel">
                                            <div class="panel-body">
                                                Neglegit male hostis temporibus, praesens nullae disputationi directam discordans
                                                dedocere. Exquisitaque physici. Spe corpora tibi facerem
                                                probet gaudemus diuturnitatem miserius, turbent depravare
                                                defendere dum historiae musicis timidiores depulsa, effectrices
                                                fruitur dolor aequi dominationis. Perfruique labefactetur
                                                invenerit explicavi tradit efficiatur videtis ullam.
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End Example Accordion Example -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel Collapse -->

        <div>
            <h3>Accordions</h3>
            <div class="row">
                <div class="col-lg-6">
                    <!-- Example Default Accordion -->
                    <div class="examle-wrap">
                        <h4 class="example-title">Default Accordion</h4>
                        <div class="example">
                            <div class="panel-group" id="exampleAccordionDefault" aria-multiselectable="true"
                                 role="tablist">
                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingDefaultOne" role="tab">
                                        <a class="panel-title" data-toggle="collapse" href="#exampleCollapseDefaultOne"
                                           data-parent="#exampleAccordionDefault" aria-expanded="true"
                                           aria-controls="exampleCollapseDefaultOne">
                                            Collapsible Group Item #1
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse in" id="exampleCollapseDefaultOne" aria-labelledby="exampleHeadingDefaultOne"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                            congressus ostendit alienae, voluptati ornateque accusamus
                                            clamat reperietur convicia albucius, veniat quocirca vivendi
                                            aristotele errorem epicurus. Suppetet. Aeternum animadversionis,
                                            turbent cn partem porrecta c putamus diceret decore. Vero
                                            itaque incursione.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingDefaultTwo" role="tab">
                                        <a class="panel-title collapsed" data-toggle="collapse" href="#exampleCollapseDefaultTwo"
                                           data-parent="#exampleAccordionDefault" aria-expanded="false"
                                           aria-controls="exampleCollapseDefaultTwo">
                                            Collapsible Group Item #2
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse" id="exampleCollapseDefaultTwo" aria-labelledby="exampleHeadingDefaultTwo"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                            loco ignavi, credo videretur multoque choro fatemur mortis
                                            animus adoptionem, bello statuat expediunt naturales frequenter
                                            terminari nomine, stabilitas privatio initia paranda contineri
                                            abhorreant, percipi dixerit incurreret deorsum imitarentur
                                            tenetur antiopam latinam haec.
                                        </div>
                                    </div>
                                </div>

                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingDefaultThree" role="tab">
                                        <a class="panel-title collapsed" data-toggle="collapse" href="#exampleCollapseDefaultThree"
                                           data-parent="#exampleAccordionDefault" aria-expanded="false"
                                           aria-controls="exampleCollapseDefaultThree">
                                            Collapsible Group Item #3
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse" id="exampleCollapseDefaultThree" aria-labelledby="exampleHeadingDefaultThree"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                            suscipere. Desiderat magnum, contenta poena desiderant
                                            concederetur menandri damna disputandum corporum equidem
                                            cyrenaicisque. Defuturum ultimum ista ignaviamque iudicant
                                            feci incursione, reprimique fruenda utamur tu faciam complexiones
                                            eo, habeo ortum iucundo artes.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Example Default Accordion -->
                </div>

                <div class="col-lg-6">
                    <!-- Example Continuous Accordion -->
                    <div class="examle-wrap">
                        <h4 class="example-title">Continuous Accordion</h4>
                        <div class="example">
                            <div class="panel-group panel-group-continuous" id="exampleAccordionContinuous"
                                 aria-multiselectable="true" role="tablist">
                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingContinuousOne" role="tab">
                                        <a class="panel-title" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                                           href="#exampleCollapseContinuousOne" aria-controls="exampleCollapseContinuousOne"
                                           aria-expanded="true">
                                            Collapsible Group Item #1
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse in" id="exampleCollapseContinuousOne" aria-labelledby="exampleHeadingContinuousOne"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            Amice cum distinguantur, pronuntiaret omnesque. Sensum opes bonorum rationis propemodum
                                            viros elegantis perpetua impetu, sentiunt probo insidiarum
                                            telos eruditus, inanium, inprobitatem sero medium necessitatibus,
                                            reperiuntur tolerabiles arbitrarer maxime equidem iniucundus
                                            ecce sine possunt, primo expedire sumitur infinitio dicturum
                                            statuam adhibuit, assumenda.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingContinuousTwo" role="tab">
                                        <a class="panel-title collapsed" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                                           href="#exampleCollapseContinuousTwo" aria-controls="exampleCollapseContinuousTwo"
                                           aria-expanded="false">
                                            Collapsible Group Item #2
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse" id="exampleCollapseContinuousTwo" aria-labelledby="exampleHeadingContinuousTwo"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            Honoris euripidis, perspici dolemus varias dicat dicantur feramus quisquis desideret
                                            solet, diligant aequo iudicem a superstitione secumque
                                            ponatur soluta iucunditate, artibus confidam esset quaeri
                                            sitisque legendis appareat consequuntur notionem, splendore
                                            maius legendis, adolescens nescio perpetua motum adhuc
                                            amoris optimus nihil requirere.
                                        </div>
                                    </div>
                                </div>
                                <div class="panel">
                                    <div class="panel-heading" id="exampleHeadingContinuousThree" role="tab">
                                        <a class="panel-title collapsed" data-parent="#exampleAccordionContinuous" data-toggle="collapse"
                                           href="#exampleCollapseContinuousThree" aria-controls="exampleCollapseContinuousThree"
                                           aria-expanded="false">
                                            Collapsible Group Item #3
                                        </a>
                                    </div>
                                    <div class="panel-collapse collapse" id="exampleCollapseContinuousThree" aria-labelledby="exampleHeadingContinuousThree"
                                         role="tabpanel">
                                        <div class="panel-body">
                                            Torquatis noster, impensa turma bono, litterae postulet, permanentes nostro derigatur
                                            veriusque istam accedere intervalla chremes affert. Ius
                                            sententiae legatis atomus quas, ponunt levitatibus timeret.
                                            Reque sinit, magnam percipi censet mentitum sis nivem virtutibus
                                            seiungi. Bono disserunt nemore. Propter blanditiis laboriosam
                                            expeteremus.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Example Continuous Accordion -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Page -->


<!-- Footer -->
<footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
        Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
</footer>
<!-- Core  -->
<script src="../../global/vendor/jquery/jquery.min.js"></script>
<script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
<script src="../../global/vendor/animsition/animsition.min.js"></script>
<script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
<script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
<script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
<script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../global/vendor/waves/waves.min.js"></script>

<!-- Plugins -->
<script src="../../global/vendor/switchery/switchery.min.js"></script>
<script src="../../global/vendor/intro-js/intro.min.js"></script>
<script src="../../global/vendor/screenfull/screenfull.min.js"></script>
<script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

<!-- Plugins For This Page -->
<script src="../../global/vendor/matchheight/jquery.matchHeight-min.js"></script>

<!-- Scripts -->
<script src="../../global/js/core.min.js"></script>
<script src="../assets/js/site.min.js"></script>

<script src="../assets/js/sections/menu.min.js"></script>
<script src="../assets/js/sections/menubar.min.js"></script>
<script src="../assets/js/sections/gridmenu.min.js"></script>
<script src="../assets/js/sections/sidebar.min.js"></script>

<script src="../../global/js/configs/config-colors.min.js"></script>
<script src="../assets/js/configs/config-tour.min.js"></script>

<script src="../../global/js/components/asscrollable.min.js"></script>
<script src="../../global/js/components/animsition.min.js"></script>
<script src="../../global/js/components/slidepanel.min.js"></script>
<script src="../../global/js/components/switchery.min.js"></script>
<script src="../../global/js/components/tabs.min.js"></script>

<script src="../../global/js/plugins/responsive-tabs.min.js"></script>
<script src="../../global/js/plugins/closeable-tabs.min.js"></script>


<script>
    (function(document, window, $) {
        'use strict';

        var Site = window.Site;
        $(document).ready(function() {
            Site.run();
        });
    })(document, window, jQuery);
</script>



</body>

</html>